<template id='StackedLineChart'>
  <div ref="chart" class="echart"></div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "StackedLine",
  components: {},
  // 定义属性
  data() {
    return {
      fontSize: 12,
      padding: false,
    };
  },
  props: {
    stackedLineData: {
      type: Object,
      default: () => {},
    },
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    stackedLineData: {
      //深度监听，可监听到对象、数组的变化
      handler(val) {
        this.drawLine(this.stackedLineData);
      },
      deep: true, //true 深度监听
      // immediate: true,
    },
  },
  // 方法集合
  methods: {
    ScreenWidth() {
      if (screen.width <= 1920) {
        this.fontSize = 12;
        this.padding = false;
      } else {
        this.fontSize = 16;
        this.padding = true;
      }
    },
    drawLine(option) {
      this.ScreenWidth();
      const chart = this.$refs.chart;
      let myChart = this.$echarts.init(chart); //推荐
      let that = this;
      let options = {
        // color: ["rgb(247, 248, 149)", "rgb(4, 242, 254)"],
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        grid: {
          left: "4%",
          right: "6%",
          top: "3%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: option.xAxis_data,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: this.padding ? 14 : that.fontSize,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#04bbdd",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: this.padding ? 14 : that.fontSize,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#04bbdd",
                width: 1, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(26, 158, 209)",
              },
            },
          },
        ],
        series: option.series,
        // series: [
        //   {
        //     name: "邮件营销",
        //     type: "line",
        //     // stack: "总量",
        //     areaStyle: {},
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [0, 0, 16, 0, 0, 0, 0],
        //     itemStyle: { normal: { label: { show: false } } },
        //   },
        //   {
        //     name: "联盟广告",
        //     type: "line",
        //     // stack: "总量",
        //     areaStyle: {},
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [0, 0, 100, 0, 0, 0, 0],
        //     itemStyle: { normal: { label: { show: false } } },
        //   },
        // ],
      };
      // 绘制图表
      options && myChart.setOption(options);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(this.stackedLineData, "this.stackedLineData");
    this.drawLine(this.stackedLineData);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.echart {
  width: 100%;
  height: 100%;
}
.font {
  font-size: 0.313vw;
  color: white;
}
</style>